.outer-container {
    width:auto;
    height:100%;
}

.react-grid-container {
    border-color: var(--vscode-editor-inactiveSelectionBackground);
    border-style: solid;
    border-width: 1px;
}

.react-grid-measure {
    position: absolute;
    bottom: 5px;
}

.react-grid-filter-button {
    background: var(--vscode-button-background);
    color: var(--vscode-button-foreground);
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin:8px 4px;
}

.react-grid-header-cell {
    padding: 0px 4px;
    background-color: var(--vscode-debugToolBar-background);
    color: var(--vscode-editor-foreground);
    text-align: left;
    font-weight: bold;
    border-right-color: var(--vscode-editor-inactiveSelectionBackground);
}

.react-grid-cell {
    padding: 0px 4px;
    background-color: var(--vscode-editor-background);
    color: var(--vscode-editor-foreground);
    border-bottom-color: var(--vscode-editor-inactiveSelectionBackground);
    border-right-color: var(--vscode-editor-inactiveSelectionBackground);
    border-right-style: solid;
    box-sizing: border-box;
} 

.react-grid-cell.active {
    background-color: var(--vscode-button-background);
    color: var(--vscode-button-foreground);
}

/* Some overrides necessary to get the colors we want */
.slick-headerrow-column {
    background-color: var(--vscode-debugToolBar-background);
    border-right-color: var(--vscode-editor-inactiveSelectionBackground);
    border-right-style: solid;
}

.slick-header-column.ui-state-default, .slick-group-header-column.ui-state-default {
    border-right-color: var(--vscode-editor-inactiveSelectionBackground);
}

.slick-sort-indicator {
    float: right;
    width: 0px;
    margin-right: 12px;
    margin-top: 1px;
}

.react-grid-header-cell:hover {
    background-color: var(--vscode-editor-inactiveSelectionBackground);
}

.react-grid-header-cell > .slick-sort-indicator-asc::before {
    background: none;
    content: '▲';
    align-items: center;
}

.react-grid-header-cell > .slick-sort-indicator-desc::before {
    background: none;
    content: '▼';
    align-items: center;
}

.slick-row:hover > .react-grid-cell {
    background-color: var(--override-selection-background, var(--vscode-editor-selectionBackground));
}